マテリアルデザインに魂を売った男の末路 Layout編

執筆者：中山大悟

執筆年：2018年

※主は英語と日本語が得意ではありません。

赤文字は間違った例

黄色文字は好ましくない例

緑文字は正しい例

レイアウトの理解

マテリアルデザインのレイアウトは、均一な要素と間隔を使用して、プラットフォーム、環境、および画面サイズの一貫性を促進します。

使用法

原則

予測可能

UIは、一貫性のあるUIリージョンと空間構成を使用して、直観的かつ予測可能なレイアウトを使用する必要があります。

一貫性

レイアウトでは、一貫したグリッド、キーライン、およびパディングを使用する必要があります。

レスポンシブ

レイアウトは適応性があり、ユーザー、デバイス、および画面要素からの操作に反応します。

構成

マテリアルデザインのレイアウトは視覚的にバランスが取れています。 ほとんどの測定値は8dpグリッドに合わせて配置され、間隔と全体のレイアウトの両方を調整します。

図形やタイポグラフィなどの小さなコンポーネントは、4dpのグリッドに揃えることができます。

https://material.io/design/assets/1BwORvuZ0Pv88f7m0z1BoAWaY0q8Y_H8K/layout-unitsmeasurements-dev-grid.png

画素密度

画面のピクセル密度と解像度は、プラットフォームによって異なります。 デバイスに依存しないピクセルとスケーラブルピクセルは、プラットフォーム間の設計に柔軟に対応できるようにする単位です。

画素密度の計算

inchに収まるpixelの数は、画素密度と呼ばれます。 高密度スクリーンは、低密度スクリーンよりも1インチあたりのpixel数が多い。 その結果、同じpixel寸法のUI要素は、低密度画面では大きく、高密度画面では小さく表示されます。

画面密度を計算するには、次の式を使用します。

$ ScreenDensit = ScreenWidth (or Height) in Pixels \div ScreenWidth (or Height) in Inches

https://material.io/design/assets/1VofrXLaZs2bcsk711ZLel1oS7F2p_vwj/layout-unitsmeasurements-pixeldensity-high.png

高密度ディスプレイ

https://material.io/design/assets/100TLfB0GWAxUUCOHQ2kaFaMZX1Zpcc7y/layout-unitsmeasurements-pixeldensity-lower.png

低密度ディスプレイ

密度の独立性

密度の独立性とは、密度の異なる画面上でのUI要素の均一な表示を指します。

密度に依存しないピクセルは、dp（「ディップ」と発音されます）と呼ばれ、任意の画面上で均一な寸法になるように拡大縮小する柔軟な単位です。 マテリアルUIは、濃度に依存しないピクセルを使用して、異なる濃度のスクリーン上で一貫して要素を表示します。

https://material.io/design/assets/1QqdZ48smdRjk9itSexZz2DcWI92iXxR7/layout-unitsmeasurements-pixeldensity-lowhigh.png

低密度、高密度どちらでもUIのサイズは同じ

Androidのピクセル密度

Androidアプリを開発するときは、密度の異なる画面上に均一に要素を表示するにはdpを使用します。 dpは、密度が160の画面上の1つの物理ピクセルに等しい。

dpの計算式は下記の通り。

$ dp = (Width In Pixels \times 160) \div ScreenDensity

Scalable pixels (sp)

スケーラブルピクセル（sp）は、密度非依存ピクセル（dp）と同じ機能を果たしますが、フォントに基づいて機能します。 spのデフォルト値は、dpのデフォルト値と同じです。

spとdpの主な違いは、spはユーザーのフォント設定を保持していることです。 アクセシビリティのためのテキスト設定がより大きいユーザーは、フォントサイズがテキストサイズのプリファレンスと一致することがわかります。

iOSのピクセル密度

論理解像度

iOSは、単位をポイント単位で測定する論理解像度を使用して密度を決定します。 ポイントは、デバイスのネイティブ解像度（ピクセル単位）にマッピングされるネイティブスケールファクタを使用してスケーリングされます。

iOSの単位

iOS用に設計するときは、ポイント（pts）を使用します。

もっと詳しく知るには以下がおすすめです。

ウェブ上のピクセル密度

論理解像度

デバイスの画面解像度に合わせて、デバイスの論理解像度を使用します。

Web上での単位

ウェブを設計するときは、dpをpx（ピクセルの場合）に置き換えます。

https://gyazo.com/6c4e53bb3465d9ddf45ab1bf696385f2.png

レスポンシブレイアウトグリッド

マテリアルデザインに対応したレイアウトグリッドは、画面のサイズと向きに適応し、レイアウト全体の一貫性を保証します。

column, gutter, margin

https://material.io/design/assets/1P_b7NIZ5_IBvs9VraJx7tu8KO-dUZXJW/layout-responsive-columns-margins-gutters.png

Column

Columnの幅は、固定値ではなく%を使用して定義され、コンテンツを任意の画面サイズに柔軟に適応させることができます。

グリッドに表示されるColumnの数は、モバイル、タブレット、または別のサイズのブレークポイントのいずれであっても、画面が表示されるブレークポイント範囲（所定の画面サイズの範囲）によって決まります。

https://material.io/design/assets/1XzRkl-dQpZybJMje81knhzgS24kQkBns/layout-responsive-columns-360.png

モバイルでは、360dpのブレークポイントで、レイアウトグリッドは4Columnを使用します。

https://material.io/design/assets/1HvKFIQPbDzU3NMF_ww5lvbHilht1bmoi/layout-responsive-columns-600.png

タブレットでは、600dpのブレークポイントで、レイアウトグリッドは8Columnを使用します。

Gutter

画面にうまく適応するために、Gutterの幅は異なるブレークポイントで変更できます。

Column間に空白が多くなるほど、より大きなスクリーンに対してはより広いGutterが適しています。

https://material.io/design/assets/1X3yLriF6STNMsF_J-G-lPqqWxEsjSGeA/layout-responsive-gutters-360.png

モバイルでは、360dpのブレークポイントで、レイアウトグリッドは16dpのGutterを使用します。

https://material.io/design/assets/1SRIW3KwxGPkJk4INc3OZM_3ZBEPOjbYg/layout-responsive-gutters-600.png

タブレットでは、600dpのブレークポイントで、レイアウトグリッドは24dpのGutterを使用します。

Margin

画面にうまく適応するには、異なるブレークポイントでMarginの幅を変更することができます。

大画面では、コンテンツの周りに空白が多くなるため、Marginが広い方が適しています。

https://material.io/design/assets/1KEfrUmIS_cTjLcQdgmkI6ISccOmF0jMd/layout-responsive-margins-360.png

モバイルでは、360dpのブレークポイントで、レイアウトグリッドは16dpのMarginを使用します。

https://material.io/design/assets/1-LhM4V-ShSU_5aGH7vWEjnLHmizNhAuA/layout-responsive-margins-600.png

タブレットでは、600dpのブレークポイントで、レイアウトグリッドは24dpのMarginを使用します。

グリッドのカスタマイズ

レイアウトグリッドは、製品とさまざまなデバイスサイズの両方のニーズに合わせて調整することができます。

Gutterのカスタマイズ

Gutterは、レイアウトのColumn間に多少のスペースを作成するように調整することができます。

https://material.io/design/assets/1TCxc9N89a-DBkUdkw5hH0A9EI_CAwe8F/layout-custom-gutters-small.gif

このレイアウトグリッドは8dpのGutterを使用しいます。

通常より狭い間隔は、画像が互いに密接に関連していることを示唆することができ、その結果これらの画像はコレクションの一部としてユーザは認識します。

https://material.io/design/assets/1GbLcsNZms8xuGj0lk021Y_jEQLbt6AIA/layout-custom-gutter-large.gif

このレイアウトグリッドでは、より大きい32dpのGutterを使用してColumn間の間隔を広げています。

余分なスペースは、各アルバムがコレクション内の個々のエンティティとして認識されるように仕向けます。

https://material.io/design/assets/1DFStWNqE_Ljf-d-vgQYmPvSjjlRluWmn/layout-custom-gutters-too-large-dont.gif

Columnと同じ幅のようにGutterが大きすぎないようにしてください。 スペースが多すぎるとコンテンツのための十分なスペースが確保されず、統一感がなくなります。

Marginのカスタマイズ

Marginはブレークポイントごとに固定値を使用します。

ボディコピーの読みやすさの理想的な長さは、1行につき40〜60文字です。

ボディコピーとはポスターなどで、キャッチコピーのように一言ではなく、小さいフォントで商品について長めに書いてある文章のこと。マテリアルデザインは印刷向けのデザインを参考にしているため、このような専門用語が登場する。

https://material.io/design/assets/1J9Pv-5i1Wj89DbB7g0zQ48ajDoQ5vFhK/layout-custom-margins-small.gif

このレイアウトグリッドでは、8dpの小さいMarginを使用して、イメージがレイアウト内でより多くのスペースを取ることができるようにしています。

https://material.io/design/assets/12kF4vPYwxmyorfzFxtJjnTcew_aSTqLG/layout-custom-margins-large.gif

このレイアウトグリッドでは、コンテンツの幅を制限するために大きな64dpのMarginが使用されます。

https://material.io/design/assets/16qws7AanqHdd2PPfIK3o9prx3tZHZIG6/layout-custom-margins-large-dont.gif

マージンをあまり大きくしないでください。コンテンツを十分に表示できる余裕がありません。

GutterとMargin

同じブレークポイント内で、GutterとMarginの幅はお互いに異なる場合があります。

https://material.io/design/assets/1wGaZj7Vtu6jEp7HMKMUQMLDKsHAa0J3r/layout-custom-gutters-margins-different.png

水平方向のグリッド

マテリアルデザインのレイアウトグリッドは、水平にスクロールするタッチUI用にカスタマイズできます。

Column、Gutter、およびMarginは、上から下へではなく、左から右に配置されます。 画面の高さによって、水平グリッド内のColumnの数が決まります。

水平にスクロールするUIは、非タッチおよびWebプラットフォームでは珍しいことです。

https://material.io/design/assets/1AAq1_BQ3wSiRXdrNtUC4oGW5DTjj_-0R/layout-horizontal-grid.png

この水平レイアウトグリッドは、4つの水平Columnを使用し、合計レイアウトの高さは400dpです。

水平グリッドは、異なる高さに対応するように配置することができ、上部にAppBarやその他のUI領域のスペースを確保できます。

https://material.io/design/assets/1H2ZlLV3xFYoUB_PlABC95d0VyhsTIX-a/layout-horizontal-grid-appbar.png

この水平レイアウトグリッドは、トップアプリケーションバーコンポーネントの下から始まり、Height 316dpの4本の水平なColumnを使用しています。

ブレークポイント

ブレークポイントは、特定のレイアウト要件を有する所定のスクリーンサイズの範囲である。

指定されたブレークポイントの範囲では、画面のサイズと向きに合わせてレイアウトが調整されます。

ブレークポイントシステム

マテリアルデザインは、以下の列構造に基づいて反応性の高いレイアウトを提供します。 4列、8列、12列のグリッドを使用するレイアウトは、さまざまな画面、デバイス、および向きで使用できます。

各ブレークポイントの範囲によって、各ディスプレイサイズに対するColumnの数、推奨されるMargin、およびGutterが決まります。

table: BleakPoint

Breakpoint Range (dp) Portrait Landscape Window Columns Margins / Gutters*

0 – 359 small handset xsmall 4 16

360 – 399 medium handset xsmall 4 16

400 – 479 large handset xsmall 4 16

480 – 599 large handset small handset xsmall 4 16

600 – 719 small tablet medium handset small 8 16

720 – 839 large tablet large handset small 8 24

840 – 959 large tablet large handset small 12 24

960 – 1023 small tablet small 12 24

1024 – 1279 large tablet medium 12 24

1280 – 1439 large tablet medium 12 24

1440 – 1599 large 12 24

1600 – 1919 large 12 24

1920 + xlarge 12 24

グリッドの動作

可変グリッド

可変グリッドは、コンテンツの拡大縮小やサイズ変更を行うColumnを使用します。 可変グリッドのレイアウトでは、ブレークポイントを使用して、レイアウトを大幅に変更する必要があるかどうかを判断できます。

https://material.io/design/assets/1BL9SdFCf9qek6sZVtiOwmbGb5YcuatRy/layout-responsive-grid-behavior-fluid.gif

不可変グリッド

固定グリッドは、一定のサイズのColumnを使用し、可変マージンを使用して、各ブレークポイント範囲内で内容を変更しないようにします。 固定グリッドのレイアウトは、割り当てられたブレークポイントでのみ変更できます。

https://material.io/design/assets/1ecGfk1w3yeUP9eck81D3Qh1kSPA_pusx/layout-responsive-grid-behavior-fixed.gif

UIリージョン

レイアウトは、サイドナビゲーション、コンテンツ領域、アプリケーションバーなどのいくつかのUIリージョンで構成されており、これらのリージョンは、アクション、コンテンツ、またはナビゲーションの宛先を表示できます。UIリージョンは、さまざまな画面サイズの異なるブレークポイントに適応しながら、デバイス間で一貫している必要があります。

デバイス間の親密性を高めるには、デスクトップ用に設計されたUI要素をモバイルUIと一貫性のある方法で調整する必要があります。

https://material.io/design/assets/0B9msDEx00QXmaldJd3BqU0NJUWc/01-ui-regions.gif

常置的なUIリージョン

常置的なUIリージョンは、ナビゲーションドロワーのようにレスポンスグリッドの外側に表示できる領域です。 これらの領域は折りたたむことができません。

https://material.io/design/assets/1LCMRi7tODKHMyKFAPm-kz4M4Jy9xnATZ/layout-responsive-uiregions-permenant.png

持続的なUIリージョン

持続的なUIリージョンは、いつでもコマンドで表示できる領域、または可視のままにできる領域です。 それらはオンまたはオフに切り替えたり、表示したり消えたりすることができます。 それらが現れると、コンテンツとグリッドの両方を圧縮します。

持続的なUIリージョンが表示されている場合、その可視性は画面上の他の要素との相互作用によって影響を受けません。

https://material.io/design/assets/1okgD4gBMG30TClLHE_nJuMdwb3WFokyJ/layout-responsive-uiregions-persistent.gif

一時的なUIリージョン

一時的なUIリージョンは一時的に表示され、レスポンシブグリッドには影響しません。 表示されている場合は、その地域のアイテム、または地域外のアイテムをタップして非表示にすることができます。

一時的なUIリージョンが表示されている場合、他の画面要素は反応しません。

https://material.io/design/assets/1Y2cQ0buTC-_HzEZZ4DdpbbCUh2qHbgDk/layout-responsive-uiregions-temporary.gif

ホワイトフレーム

ホワイトフレームは、レイアウト、レイヤー、およびシャドウに対する一貫したアプローチを提供する構造化レイアウトです。 それらは出発点であり、製品の特定のニーズを満たすために修正されることを意図しています。

https://gyazo.com/6c4e53bb3465d9ddf45ab1bf696385f2.png

間隔の設定方法

間隔方法では、ベースラインのグリッド、キーライン、パディング、増分スペーシングを使用して比率、コンテナ、およびタッチターゲットに影響を与えます。

ベースライン

8px Grid

すべてのコンポーネントは、モバイル、タブレット、およびデスクトップ用の8dp正方形のベースライングリッドに揃えられます。つまり、サイズは8pxごとに決まるということになります。

https://material.io/design/assets/1pZAqRhNtwhgKNf_JMuwNgC_uQaGUeV1X/layout-spacing-baslinegrid.png

上記の画像ではアプリバーとフローティングアクションボタンが8dpグリッドに揃っている。

4px Grid

アイコングラフィ、タイポグラフィ、およびコンポーネント内のいくつかの要素は、4dpグリッドに揃えることができます。

https://material.io/design/assets/18NDMry_mNrQ5kMbkVLuklltSbYeEIiG8/layout-spacing-4dp-baslinegrid.png

上記の画像では下のナビゲーションバーの要素が4dpのグリッドに揃えられています。

4px baseline Grid

https://material.io/design/assets/1rBlxw756KBbmMkweYtXn9MbzuOrcMN3E/layout-spacing-baslinetype.png

タイポグラフィは4pxで揃えられます。

タイポグラフィは、ボタンやリストアイテムなどのコンポーネント内で中央に配置されている場合、4dpグリッドの外側に配置できます。

https://material.io/design/assets/1MGOdlKNpp0F7oet-hGZqzeu-x0UYWG3_/layout-spacing-keylinespadding-verticalspacing-type.png

タイポグラフィが4dpグリッドに載っていなくても、テキストはリストアイテムの中央に垂直に整列して表示されます。

Spacing

Keylines

Keylinesを使用すると、レイアウトグリッド外で要素を一貫して配置することができます。 これらは、グリッドに配置されていない位置に要素が配置されている場所を示す縦線です。 Keylinesは、スクリーンの端からの各要素の距離によって決定され、8dp単位で測定されます。

Keylinesは、レスポンシブレイアウトグリッドと組み合わせて使用して、デザイン全体に要素を一貫して配置する必要があります。

https://material.io/design/assets/1tFVHB61zE5yb0JNU3dEtya_GeUyQWqn5/layout-spacing-keylinespadding-keylines.png

https://material.io/design/assets/1UE0RUpzp_l-xiTMITF430J9y5J40-Ysh/custom-keylines.gif

Keylinesは、レイアウト内の要素間に多少のスペースを作成することができます。 ブレークポイントの範囲ごとに調整可能です。

Padding

https://material.io/design/assets/1281JFDhf8ec5ZcH0ehtQpfofLFVd8SwW/layout-spacing-keylinespadding-padding.png

https://material.io/design/assets/1qRYD4sWHoSQs_Gg6jx5Xt_3TYp2CM-5d/layout-spacing-keylinespadding-padding-verthorz.png

パッディングは垂直方向と水平方向の両方で測定できます。 keylinesとは異なり、paddingはレイアウトの高さ全体に及ぶ必要はありません。

Vertical spacing

Vertical Spacingは、アプリケーションバーやリストアイテムなどの標準要素の高さを指します。 これらの要素の高さは、8dpのグリッドに合わせる必要があります。

https://material.io/design/assets/1ukHGXtjoW-SxqTzYegljgtCi3JHsSFmm/layout-spacing-keylinespadding-verticalspacing.png

Increment

Incrementは、アプリ内の要素のサイズと配置を測定するために使用される測定値です。

それは同じ高さと幅を持っています。 任意の数値にすることができますが、標準要素（AppBarなど）の高さをインクリメントとして使用することをおすすめします。

https://material.io/design/assets/1HNf_5p84x3WNVxrs0T2iOqjGXCwRaVIt/layout-spacing-increments-example.png

上記画像のIncrementは、アプリケーションバーの高さを使用して定義されます。 アプリバーの高さが64dpの場合、Incrementの値は64x64dpになります。

Cardのようなコンポーネントを幅8刻みにするには、Incrementsの数にIncrementsのサイズを掛けます。 各Incrementsが56dpの場合、カードの合計幅は次のようになります。

$ 8 increments \times 56dp = 512dp

結果としてCardの幅は512dpになります。

コンテナとアスペクト比

コンテナ

コンテナとは、囲まれた領域を表すための物です。

コンテナには、画像、アイコン、サーフェスなどのさまざまなUI要素を保持できます。

https://material.io/design/assets/106BJc2-m_mEZFdZtXC8oNuk3liiNKWY_/layout-unitsmeasurements-dev-containers.png

コンテナはサイズを固定にして、その中の要素のサイズやトリミングを制限することができます。

また、可変にすることができそれらが保持するコンテンツのサイズをサポートするように拡大縮小することができます。

https://material.io/design/assets/1EfIrWcBPIOi6i7eCpoqd-kioV8H-Asbu/layout-spacingmethods-containers.gif

アスペクト比

アスペクト比は、要素の幅と高さの比率のことです。

レイアウトの一貫性を維持するには、画像、サーフェス、画面サイズなどの要素で一貫したアスペクト比を使用します。

アスペクト比はwidth：heightと書かれています。

UI全体での使用には、以下のアスペクト比を推奨します。

https://material.io/design/assets/1AjZXUtHEYC-FEwEjcp4xbXqNHMeloLEF/layout-unitsmeasurements-dev-aspectratio.png

柔軟な比率

柔軟な比率のサイズは、レイアウトグリッドによって決まります。

コンテナの幅は画面レイアウトによって決定され、使用可能な最大スペースを満たすように拡大されます。

コンテナの高さは、そのコンテナ内の要素の高さによって決まります

コンテンツにコンテナの高さを指定させるには、柔軟な比率を使用します。

https://material.io/design/assets/1qqL5YPK_WOv0pezikoD8J0e9zuX_AFis/layout-unitsmeasurements-dev-aspectratio-baseline.png

レスポンシブなトリミング

画像をレスポンシブ表示するには、異なるブレークポイント範囲で画像をトリミングする方法を定義します。

これにより様々なブレークポイント範囲でトリミングを行うことができます。

1つの固定比率に対応する

この場合、画像のサイズは、どのブレークポイントでも1つの固定された比率のままです。

https://material.io/design/assets/1nIrW7XJIHE-uw8xDwTT83lZyZWRZuWal/layout-responsive-cropping-maintain-ratio.png

異なる比率に対応する

この場合、画像のサイズは、ブレークポイントの範囲ごとに異なる比率に変更できます。

https://material.io/design/assets/1k0eG46PsEqCwbnfULcERhPED06OxIpmy/layout-responsive-cropping-adapt-ratio.png

イメージの高さを修正する

この場合、画像のサイズは、ブレークポイント範囲を越えて高さが固定されと幅は可変の状態を維持することができます。

https://material.io/design/assets/17aTckXKZvZORtoR2uAdWo4aZ0_asgf_n/layout-responsive-cropping-fixed-height.png

タッチターゲットとクリックターゲット

タッチターゲット

タッチターゲットは、タッチ入力と非タッチ入力の両方を受信する任意のデバイスに適用されます。

情報密度とユーザビリティのバランスを保つために、タッチターゲットは48 dp以上、少なくとも8 dpのスペースが必要です。

https://material.io/design/assets/1V-52jQzdoLsqxrz_JMp20Zbp_a2Zc2gp/layout-spacing-touchtargets.png

タッチターゲットは最小でも48dp x 48dp

クリックターゲット

非タッチUIの場合、クリックターゲットは24 x 24 dp以上で、少なくとも8dpのスペースが必要です。

https://material.io/design/assets/1CCpcUPwnMC-r-tT-cDz8U8J6PzkGBtkc/layout-spacing-clicktargets.png

クリックターゲットは最小でも24dp x 24dp

補足リンク

上記リンクでは様々なデバイスの縦横比などの情報を閲覧できる。

https://gyazo.com/6c4e53bb3465d9ddf45ab1bf696385f2.png

コンポーネントの動作

このガイダンスでは、コンポーネントがグリッド内およびブレークポイント間でどのように動作するかについて説明します。

ポジショニングの用語

UIは、各ブレークポイント範囲で異なる方法で動作します。

ディスクリプタ（記述子）

グリッド内のUIの要素、コンポーネント、およびサーフェスの位置は、次の用語を使用して記述できます。

table:Descriptor

記述子 定義

Above, Below 要素のY位置

In front of, Behind 要素のZ位置

Left, Right, Centered 要素のX位置

Top, Bottom コンテナまたはスクリーンの端に対する要素のY位置

Vertically centered 要素のXとYの位置は、コンテナまたはスクリーンの端に対してセンタリング

Sticky スクロールされると特定の位置ででロックされる要素

Floating スクロールできるコンテンツの前に配置された固定要素

コンポーネントの幅

コンポーネントの幅は、画面サイズによって変わらず、レイアウトに応じて変わります。

コンポーネントの幅は次のいずれかになります。

Fiexd

Fluid

幅が固定されている要素はレイアウトの変更中にも同じ幅を維持するため、配置を変更して新しいレイアウトに合わせることができます。

それらの配置は次のいずれかになります。

Pushed

Overlaid

Fiexd

要素の幅が固定されている場合、要素の幅は画面サイズが変化しても同じ幅に維持されます。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F11dS_5T4T7m27ryPpYnIh5yM6hcCRDY8K%2Flayout-element-behavior-fixed-width.gif

このボタンコンポーネントは、右のmarginに対して固定のままです。

Fluid

要素の幅が可変の場合、画面のサイズが変わると幅が拡大または縮小します。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1W3mrTN71O4IH1knmIJv0EXHVy9Y2fppd%2Flayout-element-behavior-fluid-width.gif

このボタンは右の2つの列内でスケールされます。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1RslR2Zd6aGip8ndBN4cZuYmVxykE8bzE%2Flayout-element-behavior-fluid-dont-01.gif

小幅の要素やpaddingを表示するには狭すぎる幅になる可能性がある時はは、幅を可変にしないでください

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1BoFhPgCpkpPw8vLOpA3Q1c6hIp8iB8s9%2Flayout-element-behavior-fluid-caution-01.gif

ワイドスクリーンで複数のカラムにまたがる可変コンポーネントの場合は注意が必要です。 ボタンのような特定のコンポーネントは、画面の幅が大きくなると過剰に強調されすぎます

Push

レイアウトと画面サイズが変更されると、元の位置からコンポーネントを押し出す事ができます。

コンポーネントの幅は同じですが、その位置は左右に移動して水平方向に変化します。

これが発生し、画面外に押し出されると画面の端で部分的に遮られることがあります。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1qUtj2oEv4Q40P1wVrlePjxmmK-emW99g%2Flayout-element-behavior-push.gif

コンテンツ領域は、Drawerによって画面外にプッシュされます。

Overlaid

UIが変更されると、コンポーネントはそれを隠す他の要素によってオーバーレイされます。

コンポーネントがオーバーレイされても、その幅と位置は変わりません。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F11ZQxUyZvmrd5cxsDs73k09KcVrgTuaUE%2Flayout-element-behavior-overlaid.gif

コンテンツのUI領域は、ナビゲーションのUI領域でカバーされます。

レスポンシブパターン

コンポーネントは、次のパターンを使用して、画面サイズとデバイスタイプに基づいて寸法を適合させることができます。

これらの寸法適応は

スペースに適した様々なコンポーネントを使用する

小さなスペースに対応するためにコンポーネントの可視性を変更する

入力方法を変更する

以上3つが存在します。

ただし、スクリーンスペースが増加すると、以下の応答パターンが適用されることがあります。

隠された要素を表示させる

小さな画面で隠されたUIの部分は、指定されたブレークポイントで追加の領域が利用可能になったときに表示されます。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1eEEDI_xEyFFa6y-_yyRxyP-TpgsPb2Pr%2Flayout-responsive-patterns-reveal-navdrawer.png

画面のサイズが大きくなると、サイドナビゲーションなどの要素が表示されることがあります。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1QUva50z9eylQ2Me2EAptRdB3Yfu03WuP%2Flayout-responsive-patterns-reveal-wordprocessor.png

単純なUIでは、より強固なオプションや複雑なオプションが表示されることがあります。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1X0_fk6SxxVfzcq3FXawUxT5HmiKta3b3%2Flayout-responsive-patterns-reveal-card.png

小さな画面をタップした後にのみ表示されるコンテンツは、より多くのスペースが利用可能になったときにデフォルトで表示されることがあります。

変換

コンポーネントは、指定されたブレークポイントで、あるフォーマットから別のフォーマットに変換できます。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1vz5WkJG9K_dyBrfJHekJ8c5Wsol-yN9O%2Flayout-responsive-patterns-transform-navdrawer.png

サイドナビゲーションは、より大きな画面でタブに変換できます。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1ikwM7lbX4PAK34WZOL4IMBm9SIhaN2Di%2Flayout-responsive-patterns-transform-list.png

リストは、より大きな画面上の画像リストに変換することができます。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1a7U47c6ZgWVfDZKRpZ7FzLKgMmZdfOvy%2Flayout-responsive-patterns-transform-toolbar.png

メニュー項目は、大きな画面のツールバーのアイコンに変換できます。

分割する

複数のレイヤーを持つUIは、より多くの画面スペースが利用可能になると、それらのレイヤーをすべて同時に表示できます。

UI要素は、この新たに利用可能な空間に分割されます。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1oIscQOmfgUeVn7YHdm4j103W8K3SONg_%2Flayout-responsive-patterns-transform-divide-1.png

サイドナビゲーション、リストコンテンツ、詳細コンテンツを分割して、より大きな画面で単一のビューとして表示する

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1NWWybr23o4mQ3eka3MIZfNomzNoPGaT4%2Flayout-responsive-patterns-transform-divide-2.png

タブ付きの兄弟コンテンツは、同じ画面内で大きな画面で分割されます。

再配置

UIは、新たに利用可能なスペースを横切って再配置するようにそのレイアウトを変更することができる。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F15dkIemLoJvvIR4Y--C_aylSLrub4e-RW%2Flayout-responsive-patterns-transform-reflow-1.png

単一列形式の要素は、より大きな画面で様々な組み合わせでコンテンツ領域を塗りつぶすように再配置できます。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1VXqd6WD0BvreENnNk0g_dqtyUv8rAMsT%2Flayout-responsive-patterns-transform-reflow-2.png

横並びのタブは、大きな画面の縦並びリストに入ることがあります。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1Aj5t9FM3cIrRgmCaTnPWrKLlPUjd34bv%2Flayout-responsive-patterns-transform-reflow-3.png

エレメントは、新しい画面の比率またはデバイスの向きに基づいてコンポーネント内を再配置することができます。

展開する

UIは、より多くの領域にわたって展開できます。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1L6lMye5M8N6h3NHkmRD9b7mqWNd-aqIY%2Flayout-responsive-patterns-transform-expand-1.png

カードは、新しい大きな空間を埋めるために拡大することができます。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1apntZGLUuUlSkhpnTJe2ikMeTIFP1cKJ%2Flayout-responsive-patterns-transform-expand-2.png

ダイアログは、コンテンツに比例して、または特定の増分で展開できます。

位置

UIコンポーネントの位置は、より適切な場所に変更することができます。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1pmCqvMVPajmoDsmxmL-JBz4zqy88dSEa%2Flayout-responsive-patterns-transform-position-1.png

小さな画面の一番下のシートは、大きな画面のメニューとして位置を変えることができます。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1QALKDtXeGMSXcRu3uOA7eOUDoa2GMnlm%2Flayout-responsive-patterns-transform-position-2.png

フローティングアクションボタン（FAB）は、より大きなスクリーン上の他のUI要素に対してより目立つ位置に移動することができます。

https://gyazo.com/6c4e53bb3465d9ddf45ab1bf696385f2.png

適切な密度

マテリアルデザインはデフォルトで低密度のスペースを使用します（タップの範囲とマージンが大きい）が、ユーザーエクスペリエンスを向上させる目的がある場合、高密度スペースを提供することがあります。

適用法

密度の原理

可読性が高いこと

ブラウジングと大量のコンテンツとの相互作用を改善します。

集中できること

アクションのある要素間のスペースを減らすことで、ユーザーが集中するのを助けます。

使いやすいこと

より多くのコンテンツとアクションを1つの画面に表示します。

密度の適用

UIの密度を高めるかどうかは、ユーザーがコンポーネントとやり取りする方法によって決まります。

高密度のコンポーネントは、ユーザーがより管理しやすい方法で大量の情報を処理し、対処することを可能にします。

リスト、テーブル、およびロングフォームは、密度の増加の恩恵を受けるコンポーネントです。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1YKHvHftsbsUjMdrUh0ilymDUZdWEnXMV%2Flayout-density-rows.png

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1hUoPi8ZbKsQ7VQGknaPYEe03mw1Gbhc9%2Flayout-density-forms.png

コンポーネントとそれにネストされたコンポーネントに一貫して密度を適用します。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1H3LIv-di_o3KFHHdeA_qPSA_DToAXHie%2Flayout-density-nested.png

密度を適用しない場合

タスクまたはアラートベースのコンポーネントに高密度を適用しないでください。

焦点を絞ったタスク

ドロップダウンメニューや選択ツールとのやりとりなど、集中したタスクを含むコンポーネントに密度を適用しないでください。 これらのコンポーネントの密度を上げると、使いづらくなります。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1TenJuiDEbAnfKRFPv0qr60ViZHTm7UtP%2Ffocused-tasks-dont.png

日付選択ツールに高密度を適用しないでください。これによりユーザビリティが低下します。

アラートとメッセージ

スナックバーやダイアログなど、変更をユーザーに警告するコンポーネントに密度を適用しないでください。

アラートに高密度を適用すると、注意を喚起する効果が低下します。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1wIvFCZUgDcycFdMbSppyAV1701N0ewMw%2Falerts-dont.png

ダイアログに高密度を適用しないでください。読みやすさと顕著性が低下します。

レイアウト

グリッドとコンポーネントの密度

読み取りやすいコンテンツグループを作成するには、密度の低いコンポーネントで低密度のグリッドレイアウトを使用します。

また、コンポーネントの密度が高いほど、marginとgutterの幅は大きくなければなりません。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1tqso52WILJ3pcLaCCcwtpUz9EwVDxPcR%2Frally-density-gridvcontent-high-low.gif

幅の広いmarginとgutterがある高密度コンポーネントの行の高さは32dp

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1cWKt99wexVthn1nIjZp41RsXtDqGHTMc%2Frally-density-gridvcontent-low-high.gif

狭いmarginとgutterがある、デフォルトの密度での行の高さは56dp

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1hr-hk39BLejtoql16biR1u91f6_LiFlo%2Frally-gridvcontent-dont.gif

高密度のレイアウトグリッドと高密度のコンポーネントの両方を使用しないでください。これにより、コンテンツグループを区別することが困難になります

タッチターゲットとクリックターゲット

タッチターゲットスペース

ユーザエクスペリエンスを向上させるために、タッチターゲットのサイズが推奨最小48dpよりも小さくなければならない場合があります。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1hj41_OaOEMbI2RZBaoszxz5fBUWK_bpf%2Flayout-spacing-touchtargets-edgecases.png

ターゲットに適切な密度を適用した例

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1ueaskbOT9eJ2Ud4aNC1MRFf6adf7cx1C%2Frally-touchtargets-1.png

リストのデフォルトの密度は56dp

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1O0CQA0m-tdQQpeCDlLFFj8_WhHrt9XbQ%2Frally-touchtargets-2.png

この高密度リストでは、各リスト項目のタッチターゲットに最小スペース（48ピクセル）が定義されています

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1vOVXpXVwLIA9rV_iXSqE53S7D5anb1BW%2Frally-touchtargets-3-dont.png

ただし、タッチデバイスまたはタッチとクリックの両方の入力方法をサポートするデバイスでは、48dpよりも小さいタッチターゲットのサイズを使用しないでください

クリックターゲット

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1Iwu9AxNQxtKDvascUgRSApunX03E83mR%2Frally-clicktargets.png

高密度のアイコン（18dp）を使用する場合、最小スペース（24px）はクリックターゲットによって定義されます。

タイポグラフィの密度

タイポグラフィとは、適切なフォント種類を選び、美しく文字を配置すること又は文字を華やかに、アートのようにデザインする手法のこと

行の高さ

行の高さとは、テキストの行間のスペースです。

行の高さは、印刷向けのレイアウトで適切な密度を作成する方法として使用できます。

行の高さを引き締めるときは、引き続き4dpのベースライングリッドを使用してください。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1Mu565sAKVIRQVQSNxbKNLBKiewkwI-ge%2Flayout-line-height-1.png

Layout編は以上で終わりです。